<template>
    <div class="search-list-item">
        <div class="swiper-wrapper">
            <img class="banner" :src="houseData.defaultPicture" alt="">
            <div class="bottom">
                <!-- 图片左下角---评分＋推荐 -->
                <msg-tip :item-data="houseData.commentBriefForCD" />
            </div>
            <!-- 侧边栏 -->
            <div class="side-bar">
                <tool-bar :item-data="getToolBarData" />
            </div>
        </div>
        <div class="content">
            <search-list-item-title :item-data="getTitleData" />
            <search-list-item-info :item-data="getInfoData" />
        </div>
    </div>
</template>

<script setup>
import { watch, ref } from 'vue';
import MsgTip from '../msg-tip/msg-tip.vue';
import searchListItemTitle from '../search-list-item-title/search-list-item-title.vue';
import searchListItemInfo from '../search-list-item-info/search-list-item-info.vue';
import toolBar from '../tool-bar/tool-bar.vue';
import { computed } from 'vue';

// 传递拿到数据
const props = defineProps({
    itemData: {
        type: Object,
        default: () => { },
    },
});

// 监听数据
const houseData = ref({});
watch(() => props.itemData, (newValue, oldValue) => {
    houseData.value = newValue;
}, { immediate: true });

// 传递数据
const getToolBarData = computed(() => {
    // 获取数据
    let data = houseData.value;
    let favoriteCount = 0
    let totalCount = 0
    // 判断是否是预加载房源
    if (data.preloadHouse) {
        favoriteCount = data.favoriteCount
        totalCount = data.commentBrief.totalCount
    } else {
        totalCount = data.commentBriefForCD.totalCount
    }
    // 返回数据
    return {
        logoUrl: data.logoUrl,
        favoriteCount,
        totalCount
    }
})

// 获取数据
const getTitleData = computed(() => {
    let data = houseData.value;
    return {
        address: data.address,
        unit: data.unitSummeries[0].text,
        unitDesp: data.unitSummeries[1].text,
        unitName: data.unitName,
    }
})

// 获取数据
const getInfoData = computed(() => {
    let data = houseData.value;
    // console.log(data);
    return {
        houseTags: data.houseTags,
        promoContent: data.promoContent,
        finalPrice: data.finalPrice,
        productPrice: data.productPrice,
        priceTipBadge: data.priceTipBadge
    }
})


</script>


<style lang="less" scoped>
.search-list-item {
    margin: 10px 0px;
}

.swiper-wrapper {
    position: relative;

    .banner {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 7px;
    }

    .bottom {
        position: absolute;
        bottom: 15px;
        left: 10px;
        right: 10px;
    }

    .side-bar {
        position: absolute;
        top: 10px;
        right: 10px;
    }
}
</style>